<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>员工的新增</title>
		<script type="text/javascript" 
			src="${pageContext.request.contextPath}/js/jquery-1.7.2.js" ></script>
	</head>
	<body>
	
		<!-- <form></form> -->
		<table border="1" cellpadding="10" cellspacing="0" width="500px">
			<tr>
				<td>部门名称</td>
				<td>
					<select id="departmentList" name="departmentId">
						<option selected="selected" >请选择...</option>
						<!-- <option value="1001001">财务部</option>
						<option value="1001002">行政部</option> -->
					</select>
				</td>
			</tr>
			
			<tr>
				<td>员工名称</td>
				<td>
					<input type="text" name="employeeName" />
				</td>
			</tr>
			
			<tr>
				<td>手机</td>
				<td>
					<input type="text" name="employeePhone" />
				</td>
			</tr>
			
			<tr>
				<td colspan="2">
					<input type="button" value="员工新增" id="add" />
				</td>
			</tr>
		</table>
	</body>
	
	<script>
		//1在页面一加载的时候 向后台请求 /department.do?method=list 后台就会以json的格式给到我
		
		//2解析这个json并且 把list 加到 <select>标签
			
		$(function(){
			
			
			//1当单击新增按钮的时候往后台发送一个http请求 用ajax的方式发  异步  
			$('#add').click(function(){
				var departmentId22 = $('#departmentList').val();
				var employeeName  = $('input[name="employeeName"]').val();
				var employeePhone = $('input[name="employeePhone"]').val();
				
				//2 发的时候需要发我们页面的数据发送过去
				
				$.ajax({
					url:'${pageContext.request.contextPath}/employee.do?method=add',
					data:{
						'departmentId':departmentId22,
						'employeeName':employeeName,
						'employeePhone':employeePhone,
					},
					
					success:function(jsonData){
						
					}
					
				});
				
				
			});
			
			
			
			
			
			//3 获取到后台给我们的相应   成功success.jsp 失败 提示
			
			
			
			//如何在页面一加载就向后台发送ajax请求
			$.ajax({
				//1 我们发post请求
				type:'POST',
				url: '${pageContext.request.contextPath}/department.do?method=list',
				//告诉后台要返回json格式的数据 不要直接给我一个字符串
				dataType:'json',
				//当后台成功返回数据的时候会自动调用success方法 
				//后台给你的json格式的字符串 放在这个变量中  jsonData
				success:function(jsonData){
					console.log(jsonData);
					
					//0jsonData有3个部门  所以要遍历
					
					
					var departmentList = $('#departmentList');
					for(var index=0;index<jsonData.length;index++){
						var entity = jsonData[index];
						var departmentId =entity.departmentId;
						var departmentName =entity.departmentName;
						var option = $('<option value="'+departmentId+'">'+departmentName+'</option>');
						
						departmentList.append(option);
					}
					
					//1 先准备<option>标签
					
					//2 <option value="1001001">财务部</option>
					
					//3 把所有<option>标签加到部门列表中 departmentList
					
				}
			});
		});
		
	</script>
	
</html>